<template>
  <div>
    <mt-header title="会员注册">
      <router-link :to="{name: 'activityHome', query: {superiorId: this.superiorId,superiorType: this.superiorType}}"
                   slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
    </mt-header>
    <mt-field label="姓名" placeholder="请输入用户名" v-model="dataForm.name"/>
    <mt-field label="手机号" placeholder="请输入手机号" v-model="dataForm.mobileNum"/>
    <mt-field label="生日" @click.native="pickerVis" :readonly="true" v-model="dataForm.birthday" placeholder="请输入生日" />
    <mt-datetime-picker
      type="date"
      ref="picker"
      year-format="{value}年"
      month-format="{value}月"
      date-format="{value}日"
      :start-date="new Date('1911-01-01')"
      :end-date="new Date()"
      @confirm="handleConfirm"
      v-model="pickerValue">
    </mt-datetime-picker>
<!--    <mt-field label="生日" type="date" v-model="dataForm.birthday" placeholder="请输入生日" />-->
    <mt-button style="position: fixed; bottom:0;" @click="this.onSubmit" size="large" type="primary">提交注册</mt-button>
  </div>
</template>

<script>
  import wx from 'weixin-js-sdk'
  import {formatDate} from '@/utils/date'
  export default {
    data () {
      return {
        popupVisible: false,
        returnMsg: '',
        isAuthorized: 0,
        superiorId: '',
        superiorType: '',
        code: '',
        pickerValue: '',
        dataForm: {
          name: '',
          mobileNum: '',
          idCard: '',
          birthday: '',
          nickName: '',
          unionId: '',
          def0: '',
          def1: '',
          def2: '',
          def3: '',
          def4: ''
        }
      }
    },
    mounted () {
      this.superiorId = this.$route.query.superiorId
      this.superiorType = this.$route.query.superiorType
      let search = window.location.search
      this.code = search.substring(search.indexOf('=') + 1, search.indexOf('&'))
      this.verifyUser()
    },
    watch: {
      popupVisible (val) {
        if (val) {
          setTimeout(() => {
            this.popupVisible = false
          }, 2000)
        }
      }
    },
    methods: {
      onSubmit () {
        if (this.superiorId) {
          this.$http({
            url: this.$http.adornUrl(`/tra/member/register`),
            method: 'post',
            data: this.$http.adornParams({
              'id': this.dataForm.id || undefined,
              'superiorId': this.superiorId,
              'type': this.superiorType,
              'name': this.dataForm.name,
              'unionId': this.dataForm.unionId,
              'birthday': this.dataForm.birthday,
              'idCard': this.dataForm.idCard,
              'mobileNum': this.dataForm.mobileNum,
              'nickName': this.dataForm.nickName,
              'def0': this.dataForm.def0,
              'def1': this.dataForm.def1
            })
          }).then(({data}) => {
            this.$messagebox.alert(data.msg).then(action => {
              if (data && data.code === 0) {
                wx.closeWindow()
              }
            })
          })
        }
      },
      verifyUser () {
        this.$http({
          url: this.$http.adornUrl(`/mp/user/matchUser/${this.code}`),
          method: 'get'
        }).then(({data}) => {
          if (!(data && data.code === 0)) {
            this.$messagebox.alert(data.msg).then(action => {
              wx.closeWindow()
            })
          } else {
            this.dataForm.unionId = data.unionId
          }
        })
      },
      pickerVis () {
        this.pickerValue = new Date()
        this.$refs.picker.open()
      },
      handleConfirm () {
        this.dataForm.birthday = formatDate(this.pickerValue, 'yyyy-MM-dd')
      }
    }
  }
</script>

<style>
  .picker-items{ width:100% }
  .picker-item.picker-selected {
    color: #ea0c0c;
   }
</style>
